import React from 'react'
import T from 'prop-types'
// import { isEmpty } from 'lodash'
import './index.scss'
import MessageHeader from '../message-header'
import MessageStatusIcon from '../message-status-icon'
import TextElement from '../message-elements/text-element'
// import GroupTipElement from '../message-elements/group-tip-element'
import texta from '../../images/icon_default_user.png'

export default function MessageItem(props) {
  const { message = {}, myProfile = {}, groupMemberMap = {} } = props

  const showMessageHeader = () => {
    return true
    // return ![TIM.TYPES.MSG_GRP_TIP, TIM.TYPES.MSG_GRP_SYS_NOTICE].includes(
    //   props.message.type
    // )
  }

  const isMine = () => {
    return (message.fromid||message.userid) === myProfile.userID
  }

  // 头像
  const showAvatar = () => {
    const isShow = true
    if (isShow) {
      return (
        <img
          alt={'avatar'}
          src={message.fromAvatar || texta}
          className={'col-avatar'}
        />
      )
    }
    return null
  }

  const renderElement = () => {
    const params = {
      isMine: isMine(),
      message: message,
      payload: message.payload,
      myProfile: myProfile,
      groupMemberMap: groupMemberMap,
    }
    // console.log(params, 'params')
    switch (message.type) {
      case 'text':
        return <TextElement {...params} />
      default:
        return null
    }
  }

  const getMessagePosition = () => {
    if (isMine()) {
      return 'position-right'
    } else {
      return 'position-left'
    }
  }

  const messagePosition = getMessagePosition()

  return (
    <div className={`conversation-message-wrapper ${messagePosition}`}>
      <div className={`message-layout ${messagePosition}`}>
        {/* 头像 */}
        {showAvatar()}
        <div className={'col-content'}>
          {/* 气泡框前的昵称和时间 */}
          {showMessageHeader() ? (
            <MessageHeader
              groupMemberMap={groupMemberMap}
              message={message}
              myProfile={myProfile}
            />
          ) : null}
          <div className={'content-wrapper'}>
            {/* 发送中和发送失败图标 */}
            {isMine() ? (
              <MessageStatusIcon
                message={message}
                onResendMessageSuccess={props.onResendMessageSuccess}
              />
            ) : null}
            {/* 文字消息 */}
            {renderElement()}
          </div>
        </div>
      </div>
    </div>
  )
}

MessageItem.propTypes = {
  message: T.object,
  myProfile: T.object,
  groupMemberMap: T.object,
  onResendMessageSuccess: T.func,
}
